<template>
	<view class="page_wrap">
		<MyDropDown :list="list" ref="MyDropDown" @click="dropDownClick" @change="dropDownChange"></MyDropDown>
		<view class="card_wrap">
			<view class="card_item" v-for="(item,idx) in cardList" :key="idx" @click="toDetail(item)">
				<view class="card_top">
					<view class="card_title">
						{{item.courseName}}
					</view>
					<view class="card_pro_title">
						<view>
							{{item.courseStartDate}}至{{item.courseEndDate}}&nbsp;·&nbsp;{{item.courseTime}}{{item.courseStartTime}}-{{item.courseEndTime}}
						</view>
						<view v-if="item.courseAddress">{{item.courseAddress}}</view>
					</view>
					<view class="card_content_wrap z-flex">
						<view class="card_content_left">
							<uv-avatar text="李"></uv-avatar>
						</view>
						<view class="card_content_right">
							<view class="">
								{{item.teacher}}
							</view>
							<view class="" style="color: #aaa;margin-top: 10rpx;">
								授课
							</view>
						</view>
					</view>
				</view>
				<view class="card_bottom z-flex">
					<view class="bottom_left">
						<uv-tags :text="item.courseType" type="warning" plain></uv-tags>
					</view>
					<view class="bottom_right z-flex z-col-bottom">
						<text style="display: flex;font-size: 28rpx;line-height: 44rpx;">￥</text>
						<text>
							{{item.coursePrice}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<uv-load-more :status="status" />
		<uv-calendars ref="calendars" mode="range" @confirm="calendarsConfirm" />

		<MyTabbar></MyTabbar>
	</view>
</template>

<script>
	import MyTabbar from "@/components/MyTabbar/index.vue"
	import MyDropDown from "@/components/MyDropDown/index.vue"
	import {
		autoLogin,

	} from "@/utils/autoLogin.js"
	import {
		getCourseList
	} from "@/api/shop/index.js"
	export default {

		components: {
			MyTabbar,
			MyDropDown
		},
		onPageScroll() {
			this.$refs.MyDropDown.init();
		},
		computed: {},
		data() {
			return {
				list: [{
						name: 'order',
						label: '1',
						value: 'all',
						type: 2,
						activeIndex: 0,
						child: [{
							label: '全部',
							value: 'all'
						}, {
							label: '科目1',
							value: 'new'
						}, {
							label: '科目2',
							value: 'money'
						}]
					},
					{
						name: 'type',
						label: '2',
						value: 'all',
						activeIndex: 0,
						type: 2,
						child: [{
							label: '全部',
							value: 'all'
						}, {
							label: 'PDF',
							value: 'pdf'
						}, {
							label: 'WROD',
							value: 'word'
						}, {
							label: 'PPT',
							value: 'ppt'
						}]
					},
					{
						name: 'vip_type',
						label: '3',
						value: 0,
						type: 1,
						activeIndex: 0
					},
				],
				status: 'loadmore',
				cardList: [],
				pageNum: 1,
				pageSize: 3,
			}
		},
		onReachBottom() {
			if (this.status == 'nomore') return
			this.updateList(2)
			// if (this.page >= 3) return;
			// setTimeout(() => {
			// 	this.cardList += 5;
			// 	if (this.pageNum >= 3) this.status = 'nomore';
			// 	else this.status = 'loading';
			// }, 2000)
		},
		onLoad() {
			this.initPage()
		},

		methods: {
			initPage() {
				this.updateList(1)
			},
			initData() {
				this.cardList = this.$options.data().cardList
				this.pageNum = this.$options.data().pageNum
				this.pageSize = this.$options.data().pageSize
			},
			updateList(type) {
				this.status = 'loading';
				if (type == 1) {
					this.initData()
				} else {
					this.pageNum = ++this.pageNum;
				}
				getCourseList({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}).then(res => {
					console.log(res)
					if (res.data && res.data.list) {
						if (type == 1) {
							this.cardList = uni.$uv.deepClone(res.data.list)
						} else {
							let cardList = uni.$uv.deepClone(this.cardList)
							this.cardList = cardList.concat(res.data.list)
						}
						if (this.pageNum < res.data.pages) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'

						}
					}
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/shop/detail?id=' + item.id
				})
			},
			dropDownClick() {
				this.$refs.calendars.open();
			},
			dropDownChange() {},
			calendarsConfirm(e) {
				console.log(e)
			},
		}
	}
</script>

<style scoped lang="scss">
	.page_wrap {
		background-image: url('http://47.100.131.137:9000/sdzn-test/4f4b347e37894487beb4ba3a7b2327c1.png');
		background-size: 100%;
		background-position: top;
		background-repeat: no-repeat;
		background-color: #FFFBF6;
		min-height: 100vh;
	}

	.card_wrap {
		padding: 30rpx;

		.card_item {
			background: #FFFFFF;
			box-shadow: 6rpx 14rpx 26rpx 0rpx rgba(184, 184, 184, 0.2), -6rpx 0rpx 26rpx 0rpx rgba(184, 184, 184, 0.2);
			border-radius: 16rpx;
			height: 402rpx;
			padding: 40rpx;
			margin-bottom: 30rpx;

			.card_top {
				height: 300rpx;

				border-bottom: 4rpx solid #EAEAEA;
			}

			.card_bottom {
				justify-content: space-between;
				height: 100rpx;
			}

			.bottom_right {
				color: #F02015;
				font-size: 36rpx;
				font-weight: 600;
				font-family: PingFang SC-Regular, PingFang SC;
			}

			.card_title {
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 42rpx;
			}

			.card_pro_title {
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 500;
				color: #aaa;
				line-height: 35rpx;
				margin-top: 30rpx;

			}

			.card_content_wrap {
				margin-top: 30rpx;

				.card_content_left {
					margin-right: 20rpx;
				}

				.card_content_right {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 30rpx;
				}
			}
		}
	}
</style>
